<template>
  <div class="form-tag-label">
    <!-- <el-tag type="info" class="search-tag mar-r-8 mar-b-8" closable @close="handleTags(tag)" v-for="(tag,index) in params" :key="index">{{ tag.labelName }}</el-tag> -->
    <!-- @keyup.enter.native="addTags" -->
    <el-select
      ref="labelTagRef"
      class="mar-b-8 bbx-form-item"
      v-model="chooseTag"
      filterable
      multiple
      clearable
      :multiple-limit="10"
      @visible-change="visibleChange"
      @focus="searchAllLabel"
      @change="selectChange"
      :placeholder="$t('common.placeholder.selectSomething', {data1:$t('common.base.label')})"
    >
      <el-option
        v-for="(item, index) in allLabels"
        :key="index"
        :label="item.labelName"
        :value="item.id"
      >
      </el-option>
    </el-select>
    <!-- <el-button icon="el-icon-plus" type="plain-third" @click.stop="handlerAdd"><i class="iconfont icon-add"></i>添加</el-button> -->
  </div>
</template>

<script>
import FormMixin from '@form/mixin/form';
import {
  addProviderLabel,
  checkLabelNameRepeat,
  getProvideAllLabel,
} from '@src/api/serviceProviderApi';
export default {
  name: 'form-label',
  mixins: [FormMixin],
  props: {
    value: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    value(newValue) {
      this.params = newValue || [];
    },
  },
  mounted() {
    this.searchAllLabel();
  },
  data() {
    return {
      showTagChoose: false, // 是否显示下拉框
      chooseTag: '', // 下拉选择的单个标签
      currentTag: '', // 当前输入的标签的值
      allLabels: [], // 所有的标签
      params: [], //已经选择的标签
    };
  },
  methods: {
    //点击添加按钮
    handlerAdd() {
      this.showTagChoose = true; // 显示下拉框
      this.$nextTick(() => {
        this.$refs?.labelTagRef?.$refs?.reference?.focus(); // 下拉框聚焦
      });
    },

    // 下拉框选项隐藏时同时隐藏下拉框
    visibleChange(value) {
      if (value === false) this.showTagChoose = false;
    },

    // 删除标签
    handleTags(tag) {
      this.params.splice(this.params.indexOf(tag), 1);
      this.inputForValue(this.params);
    },

    // 添加标签
    async addTags() {
      this.currentTag = this.$refs?.labelTagRef?.$refs?.reference?.value || '';
      if (!this.currentTag) return;
      if (this.currentTag.length > 10) {
        this.$message({
          type: 'error',
          message: this.$t('component.formLabel.validTips1', {num: '10'}),
        });
        return;
      }

      try {
        this.$refs.labelTagRef.blur();
        // 调接口判断新增标签是否重复
        let resRept = await checkLabelNameRepeat({
          labelName: this.currentTag,
          objType: 1,
        });
        if (!resRept.succ) {
          this.$message({
            type: 'error',
            message: resRept.message,
          });
          return;
        }
        // 新建标签
        let resAdd = await addProviderLabel({
          labelName: this.currentTag,
          objType: 1,
        });
        if (!resAdd.succ) {
          this.$message({
            type: 'error',
            message: resRept.message,
          });
          return;
        }
        // 插入成功查询标签
        await this.searchAllLabel();
        this.selectChange(resAdd.data);
      } catch (e) {
        console.error(e);
      }
    },

    // 查询标签
    async searchAllLabel() {
      try {
        // 调接口去查询下拉标签的值
        let res = await getProvideAllLabel();
        this.allLabels = res?.data || [];
        // 需要过滤已经选择的标签params
      } catch (e) {
        console.error(e);
      }
    },

    selectChange(value) {
      this.params = this.allLabels.filter(item => value.includes(item.id))
      this.inputForValue(this.params);
    },
  },
};
</script>

<style scoped lang="scss">
.form-tag-label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  ::v-deep .el-tag--small {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    font-weight: 400;
  }
  ::v-deep .el-button--plain-third {
    margin-bottom: 8px;
  }
}
</style>
